<template>
  <a-modal
    centered
    :width="640"
    :title="modifyEntity.title"
    :visible="modifyEntity.showModify"
    @cancel="handleRefresh"
  >
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="8">
          <a-tag color="blue"> 操作完是否继续？</a-tag>
          <a-switch v-model="hasClose" :loading="loading">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-col>
        <a-col :span="8" :offset="8">
          <a-button @click="handleRefresh" v-if="readOnly">取消</a-button>
          <a-button
            icon="reload"
            v-if="!readOnly"
            @click="handleReset"
            :loading="loading"
            >重置</a-button
          >
          <a-divider type="vertical" v-if="!readOnly" />
          <a-button
            icon="check-circle"
            v-if="!readOnly"
            :loading="loading"
            @click="handleSubmit"
            >保存</a-button
          >
        </a-col>
      </a-row>
    </template>

    <a-spin :spinning="spinning">
      <a-form :form="form">
        <a-form-item
          label="字典类型"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-select
            allowClear
            :disabled="readOnly"
            v-decorator="[
              'dicTypeUniqueCode',
              { rules: [{ required: true, message: '请选择字典类型' }] },
            ]"
            @change="handleDicTypeChange"
            placeholder="请选择字典类型"
            style="width: 100%"
          >
            <a-select-option
              v-for="item in dicTypes"
              :key="item.id"
              :value="item.value"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item
          label="所属上级"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <!-- tree-default-expand-all -->
          <a-tree-select
            allowClear
            tree-data-simple-mode
            placeholder="请选择所属上级"
            :disabled="readOnly"
            v-decorator="['parentId']"
            :treeData="dicParentData"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          ></a-tree-select>
        </a-form-item>

        <a-form-item
          label="名称"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-input
            placeholder="请输入名称"
            :disabled="readOnly"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入名称' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          label="值"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-input
            placeholder="请输入值"
            :disabled="readOnly"
            v-decorator="['val']"
          />
        </a-form-item>

        <a-form-item
          label="描述"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 18 }"
        >
          <a-textarea
            :disabled="readOnly"
            v-decorator="['description']"
            placeholder="请输入描述"
            :rows="4"
          />
        </a-form-item>

        <a-row>
          <a-col :span="12">
            <a-form-item
              label="状态"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'status',
                  { valuePropName: 'checked', initialValue: true },
                ]"
                un-checked-children="冻结"
                checked-children="正常"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="是否删除"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              required
            >
              <a-switch
                :disabled="readOnly"
                v-decorator="[
                  'deleteFlag',
                  { valuePropName: 'checked', initialValue: false },
                ]"
                un-checked-children="否"
                checked-children="是"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row v-if="readOnly">
          <a-col :span="12">
            <a-form-item
              label="创建时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="创建人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['createUser']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="readOnly">
          <a-col :span="12">
            <a-form-item
              label="修改时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateTime']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="修改人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input :disabled="readOnly" v-decorator="['updateUser']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { queryDicTypeList } from "@/views/sysModule/system/dicType/dicType";
import { getDic, addDic, updateDic, queryDicTreeSelect } from "./dic";
export default {
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
          // 标题
          title: "",
        };
      },
    },
  },
  data() {
    return {
      labelCol: { xs: { span: 24 }, sm: { span: 8 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 是否只读
      readOnly: false,
      form: this.$form.createForm(this),
      entity: {},
      // 字典类型数据源
      dicTypes: [],
      // 根据选择的字典类型绑定到字典参数的数据源
      dicParentData: [],
    };
  },
  created() {
    this.loadDicType();
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //#region
    loadDicType() {
      queryDicTypeList().then((res) => {
        this.dicTypes = res.data;
      });
    },
    // 字典类型改变绑定到form
    handleDicTypeChange(val) {
      if (val) {
        let taht = this;
        this.dicParentData = [];
        this.form.setFieldsValue({ dicTypeUniqueCode: val });
        // 加载字典参数所属父级
        queryDicTreeSelect({ dicTypeUniqueCode: val }).then((res) => {
          taht.dicParentData = res.data;
        });
      }
    },
    //#endregionN

    //#region 加载数据
    loadData() {
      this.readOnly =
        this.modifyEntity.operation === this.operationFlag.Detail
          ? true
          : false;
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        let that = this;
        this.spinning = true;
        getDic(this.modifyEntity.id)
          .then((res) => {
            that.entity = res.data;
            var setData = {};
            Object.keys(that.form.getFieldsValue()).forEach((item) => {
              setData[item] = that.entity[item];
            });
            that.form.setFieldsValue(setData);
            that.handleDicTypeChange(setData.dicTypeUniqueCode);
            that.spinning = false;
          })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.spinning = true;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            addDic(values).then((res) => {
              that.submitResult(res);
            });
          } else {
            that.entity = Object.assign(
              that.entity,
              that.form.getFieldsValue()
            );
            updateDic(that.entity).then((res) => {
              that.submitResult(res);
            });
          }
        } else {
          this.spinning = false;
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.code == 200) {
        this.loadData();
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
      this.spinning = false;
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    // 重置
    handleReset() {
      this.loadData();
    },
    //#endregion
  },
};
</script>
